<template>
	<view>
		<qi-navtop :navzuoicof="'icon-icon-test59'"></qi-navtop>
		<scroll-view class="cartscroll">
			<view v-if="Object.keys(store.state.qi_cart.cart).length !== 0">
				<view
					v-for="item in store.state.qi_cart.cart"
					:key="item.goods_id">
					<qi-goods
						:goods="item"
						:showRadio="true"
						:showsubtract="true"
						@radio-change="radiochange"
					></qi-goods>
				</view>
				<view class="mianbuttom">
					<view @tap="checkboxChange">
						<radio :checked="selectParams" >全选</radio>
					</view>
					<view>
						合计：{{UserInfoNoParams}}
					</view>
					<view class="submitcss" @tap="Tapsubmit">去结算</view>
				</view>
			</view>
			<view v-else class="cartempty">
				<view><image src="https://img0.baidu.com/it/u=103546618,3013933963&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image></view>
			</view>
		</scroll-view>
		<qi-tabbar></qi-tabbar>
	</view>
</template>

<script setup>
import { useStore } from 'vuex'; // 引入useStore 方法
import { reactive,ref,computed} from 'vue';
const countstate = ref(true)
const store = useStore(); // 该方法用于返回store 实例
let {getters} = useStore();
let UserInfoNoParams = computed(() => getters['qi_cart/checkedGoodsAmount'])
let selectParams = computed(() => getters['qi_cart/total'] === getters['qi_cart/checkedCount'])

console.log(UserInfoNoParams );
console.log(selectParams);
const radiochange = val => {
	store.commit('qi_cart/updateGoodsState', val);
};
const checkboxChange = () =>{
		store.commit('qi_cart/updateAllGoodsState',!selectParams.value );
}
const Tapsubmit = ( ) =>{
	console.log(33);
}
</script>

<style lang="scss">
.cartscroll {
	height: calc(100vh - 100px);
	.cartempty {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.mianbuttom {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		padding: 10px 10px;
		height: 50px;
		align-items: center;
		box-sizing: border-box;
		.submitcss{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100px;
			border-radius: 10px;
			color: #fff;
			height: 100%;
			background-color: red;
		}
	}
}
</style>
